<template>

  <div id="app">
    <el-container >
      <el-header>
        <nav-menu :isActive="toShowTopMenu">
        </nav-menu>
      </el-header>
      <el-container>
          <el-aside width="280px"><side-bar @toHideTopMenu="hideTopMenu($event)"  class="sidebar-sticky" /></el-aside>
        <el-container>
          <el-main><router-view></router-view></el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import NavMenu from "@/components/NavMenu";
import Vue from "vue";
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
Vue.component("mavon-editor", mavonEditor);
export default {
  name: 'App',
  components: {NavMenu},
  data:function() {
return {
    toShowTopMenu:'/'
  };
},
  methods:{
    // 监听顶部窗口状态清空
    hideTopMenu(){
      this.toShowTopMenu='/'
      setTimeout(this.toShowTopMenu='',1000);
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0;
}
.el-main {
  overflow: visible !important;
  width: 100% !important;
}
.el-aside{
  overflow: visible !important;
}
.sidebar-sticky {
  position: sticky;
  top: 0;
}
.el-menu-vertical-demo .el-submenu__title{
  font-weight: bold;
}
.search-text{
  color: red !important;
}
.v-show-content{
  overflow: visible !important;
  min-height: 1000px !important;
}

</style>
